// 入口函数
$(function () {


  //1.获取元素
  const hello = $('.hello');
  const Admit = $('.navAdmit');
  const Reg = $('.navReg');
  const quit = $('.quit');


  // 1.1获取谁在登录
  let admit = localStorage.getItem('someone');
  // admit ? hello.html(admit) : hello.html('考拉欢迎你');
  // 1.3处理登录后事件(显示登录名等)
  if (admit) {
    hello.html(admit);
    Admit.hide();
    Reg.hide();
  }

  // 2.点击登录跳转登录页面
  Admit.click(function () {
    Admit.prop('href', '../html/3.login.html');
  })


  // 3.点击注册跳转注册页面
  Reg.click(function () {
    Reg.prop('href', '../html/2.register.html');
  })

  // 4.点击个人中心的退出登录跳转登录界面,并移除谁在登录
  quit.click(function () {
    localStorage.removeItem('someone');
    quit.prop('href', '../html/3.login.html');
  });



  //5.头部吸顶效果
  const header = $('.header');
  $(window).scroll(function () {
    let height = $('html').scrollTop();
    if (height > 200) {
      header.css({
        "height": "80px",
        "position": "fixed",
        "top": "0",
        "left": "0",
        "overflow": "hidden",
        "z-index": "12"
      })
    } else {
      header.css({
        "position": "relative",
        "overflow": "hidden",
        "z-index": "0",
        "height": "100px",
      })
    }

  })

  // 6.轮播图
  function Chart(ele) {
    this.box = $(ele);
    this.ul = $('.banner_top');
    this.lis = $('.banner_top li');
    this.dotS = $('.dot li');

    // 获取一个lis的大小，算出每一次移动距离
    this.distance = $(this.lis[0]).width();

    // 控制翻页
    this.index = 0;

    //清除定时器
    this.timer = null;

    // flag
    this.flag = true;

    // this.autoPlay();
    this.events();

  }

  // 自动播放
  Chart.prototype.autoPlay = function () {
    // 利用定时器实现图片滚动
    this.timer = setInterval(() => {
      this.flag = false;
      this.index++;
      this.ul.animate({
        left: -this.index * this.distance,
      }, () => {
        this.flag = true;
        if (this.index === this.lis.length - 1) {
          this.index = 0;
          this.ul.css({ "left": "0" })
        }
      }
      )
      this.dot()
    }, 1500)
  }

  // 小点切换
  Chart.prototype.dot = function () {
    // 当播放的最后一个时候，清除最后一个样式，第一个小点加上样式
    if (this.index === this.lis.length - 1) {
      this.dotS.removeClass('show').eq(0).addClass('show');
    } else {
      this.dotS.removeClass('show').eq(this.index).addClass('show');
    }
  }

  // 添加事件
  Chart.prototype.events = function () {
    const that = this;
    this.dotS.click(function () {
      clearInterval(that.timer);
      that.index = $(this).index();
      that.ul.animate({
        left: -that.index * that.distance
      })
      that.dot();
    })

    this.box.on('mouseover', () => {
      clearInterval(this.timer);
    })

    this.box.on('mouseout', () => {
      clearInterval(this.autoPlay());
    })

  }

  const a = new Chart('.banner');

  // 页面失去焦点的时候，资源跟不上  
  //       失去焦点之后，暂停播放
  //       获取焦点之后，再播放
  window.onblur = function () {
    clearInterval(a.timer)
  }
  window.onfocus = function () {
    a.autoPlay()
  }

  // 7.渲染手机和平板展示列表
  const goodSum = $('.goodSum');
  const flatSum = $('.flatSum')
  good().then(res => {
    const { status, msg, data } = res;
    console.log(res);
    if (status) {
      // console.log(data);
      let html = '';
      for (let i = 0; i < 8; i++) {
        const { goods_price, goods_des, goods_img, goods_point } = data[i];
        html += `
      <li class="goods">
        <a href="../html/4.goodlist.html">
          <img
            src="${goods_img}"
            alt="">
          <div class="goods_desc">
            <p class="detail">
              <span class="new">新品</span>
              <span class="word">${goods_des}</span>
            </p>
            <p class="price">${goods_price}</p>
            <p class="screen">${goods_point}</p>
          </div>
        </a>
      </li>
      `
      }

      goodSum.html(html);

      let flat = '';
      for (let i = 30; i < 38; i++) {
        const { goods_price, goods_des, goods_img, goods_point } = data[i];
        flat += `
      <li class="goods">
        <a href="../html/4.goodlist.html">
          <img
            src="${goods_img}"
            alt="">
          <div class="goods_desc">
            <p class="detail">
              <span class="new">新品</span>
              <span class="word">${goods_des}</span>
            </p>
            <p class="price">${goods_price}</p>
            <p class="screen">${goods_point}</p>
          </div>
        </a>
      </li>
      `
      }

      flatSum.html(flat);



    } else {
      alert(msg);
    }
  })

  // 8.点击更多跳转
  $('.moreGoods').click(function () {

    location.href = '../html/4.goodlist.html';
  })



})